import './index.scss'
import { Request, fetchMessageAPI } from '@/apis/message'
// import { Form } from 'antd-mobile'
// import { SwiperRef } from 'antd-mobile/es/components/swiper'
import {
    Form,
    Input,
    Button,
    TextArea,
    Toast
  } from 'antd-mobile'
// import { useForm } from './useForm'
// import HomeList from './HomeList'

const getMessage = async (data:Request) => {
    try {
      const res = await fetchMessageAPI(data)
    //   console.log(res);
      if (res.data.code===200) {
        Toast.show({
            icon: 'success',
            content: res.data.msg,
          })
      }
      // setBanners(res.data.data)
    } catch (error) {
      throw new Error('fetch banners error')
    }
  }

const FormPub = () => {
    // 逻辑业务
    // const { banners } = useBanner()
    // UI 渲染
    const onFinish = (values: any) => {
        // console.log(values)
        getMessage(values)
    }
    return (
      <div className="Contact-panel">
          <div className="display container">
              {/* <!-- 1.左侧表单描述 --> */}
              {/* <div className="item-info" id="item-us">
                  <p className="caption">Ready to Find out the Best 
                      Solution For your Application?</p>
                  <p className="content">
                      Our specialists are happy to support you with the next step.
                  </p>
              </div> */}
              {/* <!-- 2.表单 --> */}
              <div className="item-input" id="item-us">
                  <div className="form-box">
                      <div className="title">
                          <h3>Get in Touch</h3>
                          {/* <!-- <p>Need a Consultation? Contact Us</p> --> */}
                      </div>
                      {/* form  */}
                      <Form
                        // form={form}
                        onFinish={onFinish}
                        layout='horizontal'
                        className="el-form"
                        footer={
                        <Button block type='submit' color='primary' size='large'>
                            SEND
                        </Button>
                        }
                        >
                            {/* <Form.Header>水平布局表单</Form.Header> */}
                            <Form.Item
                                name='name'
                                className="el-form-item"
                                rules={[{ required: true, message: 'Cannot be empty' }]}
                            >
                                <Input onChange={console.log} placeholder='*Name' />
                            </Form.Item>
                            <Form.Item
                                name='email'
                                className="el-form-item"
                                rules={[{ required: true, message: 'Cannot be empty' }]}
                            >
                                <Input onChange={console.log} placeholder='*E-mail' />
                            </Form.Item>
                            <Form.Item
                                name='company'
                                className="el-form-item"
                                rules={[{ required: true, message: 'Cannot be empty' }]}
                            >
                                <Input onChange={console.log} placeholder='*Company' />
                            </Form.Item>
                            <Form.Item
                                name='phone'
                                className="el-form-item"
                                rules={[{ required: true, message: 'Cannot be empty' }]}
                            >
                                <Input onChange={console.log} placeholder='*Phone(WhatsApp)' />
                            </Form.Item>
                            <Form.Item
                                name='content'
                                className="el-form-item"
                                rules={[{ required: true, message: 'Cannot be empty' }]}
                            >
                                <TextArea onChange={console.log} rows={3} placeholder='*Message' />
                            </Form.Item>
                        </Form>
                  </div>
              </div>
          </div>
      </div>
    )
  }
  
  export default FormPub
  